<template>
    <div class="contaienr">
        <div>
            <div class="header flex items-center">
                <el-card class="left">
                    <img
                        src="../../../assets/image/dy/img3.png"
                        class="icon-head"
                        alt=""
                    />
                    <div class="flex flex-jc-sb items-center mg-t-16">
                        <div class="name fs-14 bold">
                            {{ dyData.advertiseName }}
                        </div>
                        <div class="date fc-lightgray fs-12">
                            发布时间：{{ dyData.activityTime }}
                        </div>
                    </div>
                </el-card>
                <div class="right flex-1">
                    <div class="header bold">数据表现</div>
                    <div class="flex mg-t-40">
                        <div class="item flex-1">
                            <div class="title fc-lightgray">点击量(次)</div>
                            <div class="value mg-t-10 bold fs-24">
                                {{ dyData.clickCount ?? 0 }}
                            </div>
                            <img
                                class="icon-chart"
                                src="../../../assets/image/dashboard/line-1.png"
                                alt=""
                            />
                        </div>
                        <div class="item flex-1">
                            <div class="title fc-lightgray">报名人数(次)</div>
                            <div class="value mg-t-10 bold fs-24">
                                {{ dyData.applyCount ?? 0 }}
                            </div>
                            <img class="icon-chart"
                                src="../../../assets/image/dashboard/line-2.png"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-card class="mg-t-20">
            <div class="body">
                <chartLine title="统计分析" :map-type="2" />
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getDyData, getChartData } from '@/api/baobai/dyData.ts'
import { queryAdvertiseList, queryChart } from '@/api/activity/index'
import chartLine from './components/chart-line.vue'

const dyData = ref({})

const getData = () => {
    queryAdvertiseList({
        type: 2
    }).then((res) => {
        dyData.value = res?.length && res[0]
    })
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.contaienr {
    padding: 20px;
    box-sizing: border-box;
}

.left {
    width: 362px;
    height: 228px;
    border-radius: 8px;
    background: #fff;
    // padding: 16px 16px 44px;
}

.right {
    height: 228px;
    border-radius: 8px;
    background: #f7fbfe;
    margin-left: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.icon-head {
    width: 100%;
    height: 168px;
    background: #fcc;
    display: block;
    border-radius: 8px;
}

.fc-lightgray {
    color: #6b6b86;
}

.item {
    text-align: center;
}
.mg-t-40 {
    margin-top: 40px;
}
.icon-chart {
    margin-top: 18px;
}
</style>
